<template>
	<view class='recommend'>
		<view class="faddishBody">
			<view class="faddishList">
				<view @click="goGoodDetail(item.product_id)" v-for="(item,index) in hostProduct" :key="index" class="faddishItem">
					<view class="itemTop"><image :src="item.image"></image></view>

					<view class="itemDtail">
						<view class="itemTitle">{{ item.store_name }}</view>
						<view class="itemOriginal">
							<text>原价 :</text>
							<text>￥{{ item.ot_price }}</text>
						</view>
						<view class="itemBtm">
							<text>¥{{ item.price - item.integral }}</text>
							<text v-if="item.integral" style="color: #fa4e44;">+{{ item.integral }}</text>
							<text v-if="item.integral" style="font-size: 24rpx;color: #fa4e44;">(车币)</text>
							<view class="itemShop iconfont icon-gouwuche1"><!-- <image src="/static/images/shop-car.png"></image> --></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	export default {
	computed: mapGetters(['uid']),
		props: {
			hostProduct: {
				type: Array,
				default: function() {
					return [];
				}
			},
			indexP:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goGoodDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.faddishBody {
	padding: 0 25rpx;
	background-color: #F5F5F5;
	.faddishList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.faddishItem {
			width: 340rpx;
			height: 580rpx;
			background: #ffffff;
			border-radius: 20px;
			margin-bottom: 20rpx;
			.itemTop {
				width: 100%;
				height: 346rpx;
				border-radius: 20rpx 20rpx 0px 0px;
				image {
					width: 100%;
					height: 346rpx;
					border-radius: 20rpx 20rpx 0px 0px;
				}
			}
			.itemDtail {
				padding: 25rpx 20rpx 0;
				.itemTitle {
					overflow: hidden;
					height: 80rpx;
					line-height: 40rpx;
					// text-overflow: ellipsis;
					// white-space: nowrap;
					font-size: 26rpx;
					color: #232323;
				}
				.itemOriginal {
					margin: 15rpx 0;
					font-size: 24rpx;
					color: #9a9a9a;
					text:nth-child(2) {
						text-decoration: line-through;
						margin-left: 15rpx;
					}
				}
				.itemBtm {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #000000;
					.itemShop {
						width: 43rpx;
						height: 43rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
	.notAvailable {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 24rpx;
		color: #666;
	}
	.over_line {
		text-align: center;
		background-color: #f5f5f5;
		font-size: 26rpx;
		color: #999;
		padding: 20rpx 0;
	}
}
</style>
